<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>登录/注册</title>
    <link rel="icon" href="../img/logo.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../bootstrap-4.6.2-dist_and_jQuery/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap-4.6.2-dist_and_jQuery/css/style.css">
    <script src="../bootstrap-4.6.2-dist_and_jQuery/js/jquery-3.7.0.js"></script>
    <script src="../bootstrap-4.6.2-dist_and_jQuery/js/bootstrap.js"></script>
</head>
<body style="background-color: rgb(181, 200, 198);">
    <div class="container">

        <div class="row justify-content-center">
          <div style="width: 400px;">
            <div class="card">
              <div class="card-header">
                <h4 class="text-center">登录</h4>
              </div>
              <div class="card-body">
                <form id="form-login" onsubmit="return false;">
                  <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名" autocomplete="username">
                  </div>
                  
                  <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码" autocomplete="new-password">
                  </div>
                  <div class="form-group">
                    <label for="identity">选择身份：</label>
                    <select name="identity" id="identity">
                      <option value="student">学生</option>
                      <option value="teacher">老师</option>
                      <option value="secretary">教秘</option>
                      <option value="adminer">管理员</option>
                    </select>
                  </div>
                  <br/>
                  <button type="submit" class="btn btn-primary btn-block" id="login">登录</button>
                  <div class="text-center mt-3">
                    <span>还没有账号？</span>
                    <a href="注册.html" class="ml-2">立即注册</a>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
    </div>
      <!-- 提示信息 -->
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">提示消息</h5>
            </div>
            <div class="modal-body">
              <b id="message">这是提示信息</b>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
          </div>
        </div>
      </div>
    <script>//显示提示信息
        function showmessage(message){
            $('#message').text(message)
            $('#exampleModal').modal('show');
        }
    </script>
    <script>//登录部分
      $(function(){
        document.cookie = "logined=false";
        $("#form-login").submit(function(event){
          var username= $("#username").val();
          var password= $("#password").val();
          var identity= $("#identity").val();
          if (!username || !password){
            showmessage("请填写完整再登录");
            return ;
          }
          $.ajax({
            type:"POST",
            url: "login",//已经自己写后端验证过了，等待后端写好路由接口，请求包含一串字符串，以&分开，希望返回一个字符串true表示登录成功，false表示登录失败
            data: $(this).serialize(),
            success : function(response){
              //返回数据包括一个登陆是否成功和身份例如"true;用户","true;管理员"
              var arr=response.split(";");
              if(arr[0] == "true"){
                showmessage("登陆成功，1s后跳转至首页");
                document.cookie = "logined=true;";
                document.cookie = identity+"_id="+arr[1]+";";
                setTimeout(function() {
                	if(identity==="student")
                  		window.location.href = "学生首页.html";
                	else if(identity==="teacher")
                  		window.location.href = "老师首页.html";
                  else if(identity==="secretary")
                      window.location.href = "教学秘书首页.html";
                  else 
                      window.location.href = "管理员首页.html";
                  }, 1000);
              }
              else{
                showmessage("用户名或密码错误");
              }  
            },
            error: function(xhr, status, error){
              console.error(error);
              showmessage("登录请求失败")
            }

          });
        });
      
      });
    </script>
    <script>
        !function(){
            function n(n,e,t){
                return n.getAttribute(e)||t
            }
            function e(n){
                return document.getElementsByTagName(n)
            }
            function t(){
                var t=e("script"),o=t.length,i=t[o-1];
                return{
                    l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",200)
                }
            }
            function o(){
                a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
                    c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
            }
            function i(){
                r.clearRect(0,0,a,c);
                var n,e,t,o,m,l;
                s.forEach(function(i,x){
                    for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
                    null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
                        l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
                        t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
                }),
                    x(i)
            }
            var a,c,u,m=document.createElement("canvas"),
                d=t(),l="c_n"+d.l,r=m.getContext("2d"),
                x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
                    function(n){
                        window.setTimeout(n,1e3/45)
                    },
                w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
                window.onmousemove=function(n){
                    n=n||window.event,y.x=n.clientX,y.y=n.clientY
                },
                window.onmouseout=function(){
                    y.x=null,y.y=null
                };
            for(var s=[],f=0;d.n>f;f++){
                var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
            }
            u=s.concat([y]),
                setTimeout(function(){i()},100)
        }();
    </script>
</body>
</html>
